<template>
    <el-select v-model="value" placeholder="Select" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>
  </template>
    
    
<script>
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]




    export default {
    
        components: {
        },
        data() {
            return {
                options:options,
                value:'',
            }
        },
        mounted(){
        
        },
        computed: {
    
        },
    
        methods: {
            handleNodeClick(data) {
             console.log(data);
            },
            handleCheckChange(data, checked, indeterminate) {
            },
    
        },
     };
    </script>
    
    
<style lang="less" scoped>
.content{
    width: 1000px;
    height: 500px;
    background: rgb(115, 191, 194);
}


/** */
.el-tree{
    width: 180px;
    background: rgba(1,18,26,0.4);
    border-radius: 6px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(69, 174, 235, 0), rgba(96, 200, 251, 1)) 1 1;
    backdrop-filter: blur(1px);
    color:#fff;
}


::v-deep .el-tree-node__content{&:hover{background-color: rgba(80, 65, 168, 0.87);}
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {background-color: rgb(20, 207, 20) !important;}


</style>
    
    
    
    
    
    
    